<template>
    <view class="content">
        <view class="card">
        	<image src="../../static/image/bg_3.png" class="bg-3"></image>
        	<view class="info">
        		<view>一诺健康管理卡</view>
        		<view class="num">NO.{{data.card_no}}</view>
        		<view class="time">有效期至{{data.end_time}}</view>
        	</view>
        </view>
		
		<view class="btn" @click="toShare">转赠亲友</view>
		
		<view class="d-tip" v-if="content.content">
			<view class="u-p-b-10 text-bold">温馨提示：</view>
			<view class="tip">
				<u-parse :html="content.content"></u-parse>
			</view>
		</view>
		
		<u-mask :show="Tshow" mode="center" border-radius="14">
		    <view class="popup">
		        <view class="win-box2">
		            <image src="../../static/image/tt.png" class="pop-img"></image>
		        </view>
		    </view>
		</u-mask>
    </view>
</template>

<script>
	import {URL} from '@/static/js/common.js'
    export default {
        data() {
            return {
				URL,
				card_id: '',
                content: {},
				data: {},
				pid: '',
				Tshow: false,
				card_no: '',
				name: '',
            };
        },
        onLoad(option) {
			if (option.card_id) {
				this.card_id = option.card_id
				this.getData()
			}
			this.getContent()
			this.getInfo()
			this.getCardNo()
			
            this.$ajax('wx_config', {
            	url: location.href.split('#')[0],
            }).then(ret => {
            	if (ret.status == 0) {
            		this.$wx.config({
            		    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            		    appId: ret.data.appId, // 必填，公众号的唯一标识
            		    timestamp: ret.data.timestamp, // 必填，生成签名的时间戳
            		    nonceStr: ret.data.nonceStr, // 必填，生成签名的随机串
            		    signature: ret.data.signature, // 必填，签名
            		    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage','updateAppMessageShareData','updateTimelineShareData'], 
            		});
					this.share()
            	} else {
            		this.$toast(ret.message);
            	}
            });
        },
        methods: {
			toShare() {
				this.Tshow = true
			},
			
            share() {
                let _this = this;
				_this.$wx.ready(function() {
				    _this.$wx.updateTimelineShareData({
				        title: `${_this.name}赠你一张“一诺健康管理卡”点击领取`, // 分享标题
				        desc: '优质体检机构甄选，极速问诊，就医服务，为您和家人健康保驾护航！', // 分享描述
				        link: `${_this.URL}h5/#/pages/card/card?cno=${_this.card_no}&pid=${_this.pid}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				        imgUrl: _this.URL + 'h5/static/image/logo_2.png', // 分享图标
				        success: function () {
				        // 用户点击了分享后执行的回调函数
				        }
				    });
				    _this.$wx.updateAppMessageShareData({
				        title: `${_this.name}赠你一张“一诺健康管理卡”点击领取`, // 分享标题
				        desc: '优质体检机构甄选，极速问诊，就医服务，为您和家人健康保驾护航！', // 分享描述
				        link: `${_this.URL}h5/#/pages/card/card?cno=${_this.card_no}&pid=${_this.pid}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				        imgUrl: _this.URL +  "h5/static/image/logo_2.png", // 分享图标
				        success: function () {
				        // 用户点击了分享后执行的回调函数
				        }
				    });
				})
            },
			
			getInfo() {
				this.$ajax('members', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
			            this.pid = ret.data.id
						this.name = ret.data.nickname
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getCardNo() {
				this.$ajax('add_transfer', {
				    userToken: this.$getSync('userToken'),
					cards_id: this.card_id,
				}).then(ret => {
					if (ret.status == 0) {
				        this.card_no = ret.data.id
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getData() {
				this.$ajax('get_cards_detail', {
				    userToken: this.$getSync('userToken'),
					card_id: this.card_id,
				}).then(ret => {
					if (ret.status == 0) {
				        this.data = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getContent() {
				this.$ajax('get_content', {
			        type: 11,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.content = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box2 {
	    width: 100vw;
	    height: 100vh;
		background: rgba(0, 0, 0, .2);
	    position: relative;
	}
	.pop-img{
		width: 393rpx;
		height: 239rpx;
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}
	
	
    page{
        background-color: #fff;
    }
	.content{
		padding: 20rpx;
	}
	.card{
		margin-bottom: 30rpx;
		position: relative;
	}
	.bg-3{
		width: 710rpx;
		height: 348rpx;
	}
	.info{
		width: 710rpx;
		height: 348rpx;
		padding: 40rpx;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 30rpx;
		color: #fff;
	}
	.num{
		font-size: 44rpx;
		font-weight: bold;
		padding: 70rpx 0;
	}
	.time{
		font-size: 24rpx;
	}
	
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 70rpx 0;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	.d-tip{
		font-size: 24rpx;
		color: #5c667b;
	}
	.tip{
		color: #a0a8b8;
	}
	

</style>
